<template>
	<div name="flashSale">
		<div class="box">
			<div class="Limit">
				<titleBlock title="小米闪购">
					<div class="saleToggle">
						<div class="saleToggleGrop iconfont" @click="saleToggle" data-id="left">&#xe660;</div>
						<div class="saleToggleGrop iconfont" @click="saleToggle" data-id="right">&#xe65f;</div>
					</div>
				</titleBlock>
				<div class="saleContent">
					<div class="saleTime">
						<div class="saleHow">{{saleList.overTime}}场</div>
						<img src="../assets/image/1.png" alt="">
						<div class="saleOver">距离结束还有</div>
						<div class="saleOverTime">
							<div class="saleTimeBox">
								{{hour}}
							</div>
							<span>:</span>
							<div class="saleTimeBox">
								{{minute}}
							</div>
							<span>:</span>
							<div class="saleTimeBox">
								{{second}}
							</div>
						</div>
					</div>
					<div class="saleList">
						<div class="saleListBox" ref="saleBox">
							<div class="saleCard" v-for="(item,index) in saleList['saleList']" v-bind:key="index" :style="cardBorder()">
								<a :href="item.url">
									<img :src="item.img" alt="" />
									<p class="saleTitle">{{item.title}}</p>
									<p class="saleInfo">{{item.info}}</p>
									<span class="price">{{item.price}}元</span><del class="priced">{{item.priced}}元</del>
								</a>
							</div>
							
						</div>
					</div>
				</div>
				<bannerSmail :imgData="imgData[0]"></bannerSmail>
				<titleBlock title="手机"></titleBlock>
				<shopCard :shopList="saleList['saleList']" img="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=293&h=768&f=webp&q=90"></shopCard>
				<bannerSmail :imgData="imgData[1]"></bannerSmail>
			</div>
		</div>
	</div>
</template>

<script>
	import bannerSmail from "./smail/BannerSmail.vue"
	import titleBlock from "./smail/TitleBlock.vue"
	import shopCard from "./smail/ShopCard.vue"
	export default{
		name:"index",
		data(){
			return {
				saleList:[],
				scrollLeft:0,
				hour:0,
				minute:0,
				second:0,
				imgData:[
					{
						url:"#",
						img:"//cdn.cnbj1.fds.api.mi-img.com/mi-mall/042df22986759ffc1a62d3edf0474633.jpg?thumb=1&w=1533&h=150&f=webp&q=90"
					},
					{
						url:"#",
						img:"//cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1533&h=150&f=webp&q=90"
					}
				]
			}
		},
		components:{
			bannerSmail,
			titleBlock,
			shopCard
		},
		methods:{
			//左右滑动
			saleToggle:function(e){
				var id=e.target.dataset.id;
				var howList=this.saleList['saleList'].length/4-1;//2列  索引0 1
				var maxScroll=-(howList*978);
				if(id=="right"){
					if(this.scrollLeft-978<maxScroll){
						this.scrollLeft=0;
					}else{
						this.scrollLeft-=978;
					}
				}else{
					if(this.scrollLeft+978>0){
						this.scrollLeft=maxScroll;
					}else{
						this.scrollLeft+=978;
					}
				}
			},
			//倒计时计算
			saleTime:function(start,over){
				//06:00-18:00\
				start=start.split(":");
				over=over.split(":");
				over[2]=0;
				var day= new Date();
				var hour=day.getHours(),		//当前小时
					minute=day.getMinutes(),	//当前分钟
					second=day.getSeconds();	//当前秒			
				// //计算秒
				if(over[2]-day.getSeconds()<0){
					over[2]=60;
					over[1]-=1;
				}
				if(over[2]-day.getSeconds()>=10){
					second=over[2]-day.getSeconds();
				}else if(over[2]-day.getSeconds()>0 && over[2]-day.getSeconds()<10){
					second='0'+(over[2]-day.getSeconds()).toString();
				}else{
					second='00';
				}
				this.second=second;
				//计算分
				if(over[1]-day.getMinutes()<0){
					over[1]=60;
					over[0]-=1;
				}
				if(over[1]-day.getMinutes()>=10){
					minute=over[1]-day.getMinutes();

				}else if(over[1]-day.getMinutes()>0 && over[1]-day.getMinutes()<10){
					minute='0'+(over[1]-day.getMinutes()).toString();
				}else{
					minute='00';
				}
				this.minute=minute;
				//计算小时
				if(over[0]-day.getHours()<0){
					over[0]=0;
				}
				if(over[0]-day.getHours()>=10){
					hour=over[0]-day.getHours();
				}else if(over[0]-day.getHours()>0 && over[0]-day.getHours()<10){
					hour='0'+(over[0]-day.getHours()).toString();
				}else{
					hour='00';
				}
				this.hour=hour;
				
				
			}
		},
		mounted() {
			var that = this;
			this.$http.get("/api/SaleList.json").then(function(e){
				that.saleList=e.data;
				setInterval(function(){
					that.saleTime(e.data.startTime,e.data.overTime);
				},1000)
				
			})
			
		},
		computed:{
			cardBorder(){
			return function(){
					var borderColor=["#2196f3","#e53935","#00c0a5","#ffac13","#83c44e","#00c0a5"];
					var rand=Math.round(Math.random()*5);
					return 'border-top-color:'+borderColor[rand]+'!important;transform:translateX('+this.scrollLeft+'px)';
					}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~style/var.styl'
	 ::-webkit-scrollbar {display:none}
	.box
		width 100%
		background-color #f5f5f5
		padding-bottom 20px
		.boxTitle
			position relative
			.saleToggle
				position absolute
				bottom 2px
				right 0px
				width 70px
				height 25px
				display flex
				.saleToggleGrop
					flex 1
					border: 1px solid #e0e0e0;
					font-size 12px
					line-height 25px
					display flex
					justify-content center
					align-items center
					cursor pointer
				.saleToggleGrop:hover
					color $bgcolor
		.saleContent
			width 100%
			height 340px
			display flex
			.saleTime
				width 234px
				height 100%
				border-top-width: 1px;
				border-top-style: solid;
				margin-right 14px
				background: #f1eded;
				text-align: center;
				border-top-color: #e53935;
				img
					margin: 25px auto;
					width 34px
					height 53px
				.saleHow
					width 100%
					font-size: 21px;
					color: #ef3a3b;
					padding-top: 54px;
					text-align center
				.saleOver
					color: rgba(0,0,0,.54);
					font-size: 15px;
				.saleOverTime
					margin-top 28px
					width 100%
					display flex
					justify-content center
					span
						font-size 20px
						font-weight bold
						padding 8px 5px
					.saleTimeBox
						width 46px
						height 46px
						background-color #605751
						color: #fff;
						line-height 46px
						font-size: 24px;
		.saleList
			width 978px
			height 100%
			overflow hidden
			.saleListBox
				height 100%
				overflow-x scroll
				overflow-y hidden
				white-space: nowrap;
			.saleCard
				transition all 1s
				white-space: normal;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
				display: inline-block;
				width 234px
				height 300px
				white-space: nowrap;
				border-top-width: 1px;
				border-top-style: solid;
				margin-right 14px
				background: #fff;
				text-align: center;
				padding-top: 39px
				border-top-color: #e53935;
				img
					width 160px
					height 160px
					margin: 0 auto 22px;
				.saleTitle
					margin: 0 20px 3px;
					font-size: 14px;
					font-weight: 400;
					text-overflow: ellipsis;
					color: #212121;
					overflow: hidden;
					white-space: nowrap;
				.saleInfo
					height: 18px;
					margin: 0 20px 12px;
					font-size: 12px;
					text-overflow: ellipsis;
					color: #b0b0b0;
					overflow: hidden;
					white-space: nowrap;
				.price
					font-size 14px
					color: #ff6709;
				.priced
					font-size 14px
					color #b0b0b0;
	
					
</style>
